<template>
  <div v-loading="lookLoad" class="f-c-g home-layout">
    <div class="home-content">
      <div class="calendar">
        <FullCalendar
          ref="fullCalendar"
          class="demo-app-calendar"
          :options="calendarOptions"
        >
          <!-- <template v-slot:eventContent="arg">
            <b>{{ arg.timeText }}</b>
            <i>·{{ arg.event.title }}</i>
          </template> -->
        </FullCalendar>
      </div>
      <div class="calendar-list">
        <el-button
          class="created-button"
          type="primary"
          @click="createSchedule"
        >新建日程</el-button>
        <div class="people-list">
          <div class="people-list-title">
            <div class="people-list-title-txt">人员</div>
          </div>
          <div class="check-list">
            <el-radio-group
              v-model="checkList"
              size="medium"
              class="check-list-item"
            >
              <el-radio :label="user.SSN_SN">{{ user.NM }}</el-radio>
              <div
                v-if="queryOrganizerWithCurrentUser.length"
                class="check-list-item"
              >
                <el-radio
                  v-for="item in queryOrganizerWithCurrentUser"
                  :key="item.SSN_SN"
                  :label="item.SSN_SN"
                >{{ item.NM }}</el-radio>
              </div>
            </el-radio-group>
            <!-- <el-checkbox-group
              v-model="checkList"
              size="medium"
              class="check-list-item"
            >
              <el-checkbox :label="user.SSN_SN" disabled>{{
                user.NM
              }}</el-checkbox>
            </el-checkbox-group> -->
          </div>
        </div>
        <div class="timeline-list">
          <div class="people-list-title">
            <div class="people-list-title-txt">日程安排</div>
            <div class="people-list-more" @click="toMore">更多</div>
          </div>
          <div class="timeline">
            <ul v-if="thirdDayChooseFour.length" id="timeline">
              <li
                v-for="item in thirdDayChooseFour"
                :key="item.code"
                class="work"
                :class="{ beforeSty: timeIsBefore(item.beginTime, item.type) }"
              >
                <div class="relative">
                  <div class="date">
                    <div>{{ getDays(item.beginTime) }}</div>
                    <div>{{ getWeek(item.beginTime) }}</div>
                  </div>
                  <span class="circle" />
                </div>
                <div class="content">
                  <div>{{ item.title }}</div>
                  <p v-if="item.type !== 'all_day'">
                    时间：{{ getTime(item.beginTime) }} 至
                    {{ getTime(item.endTime) }}
                  </p>
                  <p v-else>时间：全天</p>
                </div>
              </li>
            </ul>
            <div v-else>暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <com-popup :dis-config="diaConfig">
      <template slot="content">
        <div class="info-page">
          <test-form ref="formAddType" :form="formConfig" />
        </div>
      </template>
    </com-popup>
    <com-popup :dis-config="diaConfigLook">
      <template slot="content">
        <div v-if="lookDataForSchedule" class="info-page">
          <div class="info-page-look">
            <div class="info-page-item">
              <div class="info-page-look-label">标题：</div>
              <div>{{ lookDataForSchedule.title }}</div>
            </div>
            <div class="info-page-item">
              <div class="info-page-look-label">全天：</div>
              <div>
                {{ checkAllDay(lookDataForSchedule.type) }}
              </div>
            </div>
            <div class="info-page-item">
              <div class="info-page-look-label">开始时间：</div>
              <div>
                {{
                  lookDataForSchedule.type === 'all_day'
                    ? getDays(lookDataForSchedule.beginTime)
                    : lookDataForSchedule.beginTime
                }}
              </div>
            </div>
            <div class="info-page-item">
              <div class="info-page-look-label">结束时间：</div>
              <div>
                {{
                  lookDataForSchedule.type === 'all_day'
                    ? getDays(lookDataForSchedule.endTime)
                    : lookDataForSchedule.endTime
                }}
              </div>
            </div>
            <div class="info-page-item">
              <div class="info-page-look-label">地点：</div>
              <div>{{ lookDataForSchedule.address }}</div>
            </div>
            <div class="info-page-item">
              <div class="info-page-look-label">附件：</div>
              <div>
                <div
                  v-for="r in lookDataForSchedule.attachList"
                  :key="r.path"
                  style="
                    color: rgba(8, 98, 209, 1);
                    padding-bottom: 3px;
                    cursor: pointer;
                  "
                >
                  <div @click="lookOnline(r.path)">{{ r.name }}</div>
                </div>
              </div>
            </div>
            <div class="info-page-item">
              <div class="info-page-look-label">备注：</div>
              <div>{{ lookDataForSchedule.remark }}</div>
            </div>
            <test-form
              ref="formPeople"
              class="spec-form"
              :form="formConfigPeople"
            />
            <div class="info-page-item">
              <div class="info-page-look-label">提醒：</div>
              <div>{{ changeType(lookDataForSchedule.remindType) }}</div>
            </div>
            <!-- <div class="info-page-item">
              <div class="info-page-look-label">重复：</div>
              <div>{{ changeType(lookDataForSchedule.repeatType, true) }}</div>
            </div> -->
            <div
              v-if="isCreator"
              class="info-page-edit"
              @click="editorScheduled(lookDataForSchedule)"
            >
              编辑
            </div>
            <div
              v-if="isCreator"
              class="info-page-delete"
              @click="deleteScheduled(lookDataForSchedule)"
            >
              删除
            </div>
          </div>
        </div>
      </template>
    </com-popup>
  </div>
</template>
<script>
import { conSelect, conDate, comPopup, testForm, conCascader } from 'qh-common'
import conUpload from '../../tmp/upload.vue'
import conSwitch from '@/components/switch.vue'
import dao from './dao'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import rrulePlugin from '@fullcalendar/rrule'
import { base64 } from '@/utils/base64.js'

var moment = require('moment')
import 'moment/locale/zh-cn'

export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
    comPopup,
    testForm
  },

  data() {
    const self = this
    return {
      thirdDayChooseFour: [],
      queryOrganizerWithCurrentUser: [],
      isCreator: true,
      user: JSON.parse(localStorage.getItem('user')),
      checkList: JSON.parse(localStorage.getItem('user')).SSN_SN,
      editorCode: '',
      dateOfBeforeModification: '',
      lookLoad: false,
      lookDataForSchedule: null,
      removeEventObj: null,
      calendarApi: null,
      calendar: null,
      scheduleData: [], // 日程数据
      diaConfigLook: {
        open: false,
        title: '查看',
        re: null,
        size: 'c',
        onlyRead: true,
        destroyOnClose: true,
        save: {
          txt: '确认',
          hidden: true,
          click() {
            self.diaConfigLook.open = false
            self.calendar.unselect()
          }
        },
        cancel: {
          txt: '取消',
          hidden: true,
          click() {
            self.diaConfigLook.open = false
            self.calendar.unselect()
          }
        }
      },
      diaConfig: {
        open: false,
        title: '新建日程',
        re: null,
        size: 'c',
        destroyOnClose: true,
        save: {
          txt: '确认',
          click() {
            const data = self.$refs.formAddType.getDatas()
            console.log(self.calendar, data, '日程实例')
            if (
              data.participantCodeList &&
              typeof data.participantCodeList === 'string'
            ) {
              data.participantCodeList = [data.participantCodeList]
            }
            if (
              data.participantCodeLis &&
              typeof data.participantCodeList === 'object'
            ) {
              data.participantCodeList = []
            }
            if (!data.participantCodeList) {
              data.participantCodeList = []
            }

            if (data.type) {
              data.type = 'all_day'
              data.beginTime = data.beginTimeAll
                ? data.beginTimeAll + ' 00:00:00'
                : ''
              data.endTime = data.endTimeAll
                ? data.endTimeAll + ' 00:00:00'
                : ''
            } else {
              data.type = 'period_of_time'
              data.beginTime = data.beginTimeRange ? data.beginTimeRange : ''
              data.endTime = data.endTimeRange ? data.endTimeRange : ''
            }
            if (self.editorCode) {
              Object.assign(data, {
                code: self.editorCode,
                editType: 'exclude',
                dateOfBeforeModification: self.dateOfBeforeModification
              })
              self.$refs.formAddType.valiDates('', () => {
                self.lookLoad = true
                dao
                  .editSchedule(data)
                  .then(res => {
                    console.log(self, '实例有吗')
                    self.removeEventObj.event.remove()
                    self.addedModifiedBuildSchedule(
                      res.newSchedule,
                      'addedModified'
                    )
                    self.diaConfig.open = false
                    self.$message({
                      type: 'success ',
                      message: '修改成功'
                    })
                    self.processingScheduleData(false)
                    this.getScheduleUserForThirday()
                    self.lookLoad = false
                  })
                  .catch(() => {
                    self.lookLoad = false
                  })
              })
              return
            }
            self.$refs.formAddType.valiDates('', () => {
              self.lookLoad = true
              dao
                .addSchedule(data)
                .then(res => {
                  console.log(self, '实例有吗')
                  self.addedModifiedBuildSchedule(res, 'addedModified')
                  self.diaConfig.open = false
                  self.$message({
                    type: 'success ',
                    message: '新建成功'
                  })
                  self.processingScheduleData(false)
                  self.getScheduleUserForThirday()
                  self.lookLoad = false
                })
                .catch(() => {
                  self.lookLoad = false
                })
            })
          }
        },
        cancel: {
          txt: '取消',
          click() {
            self.diaConfig.open = false
            self.calendar.unselect()
          }
        }
      },
      formConfig: {
        title: {
          txt: '标题',
          el: null,
          rule: { required: true }
        },
        type: {
          txt: '全天',
          el: conSwitch,
          config: {
            change(e) {
              if (e) {
                self.formConfig.beginTimeRange.hidden = true
                self.formConfig.beginTimeAll.hidden = false
                self.formConfig.endTimeRange.hidden = true
                self.formConfig.endTimeAll.hidden = false
              } else {
                self.formConfig.beginTimeRange.hidden = false
                self.formConfig.beginTimeAll.hidden = true
                self.formConfig.endTimeRange.hidden = false
                self.formConfig.endTimeAll.hidden = true
              }
            }
          }
        },
        beginTimeRange: {
          txt: '开始时间',
          el: conDate,
          rule: { required: true },
          value: '',
          config: {
            type: 'datetime',
            valueType: 'yyyy-MM-dd HH:mm:ss'
          }
        },
        beginTimeAll: {
          txt: '开始时间',
          el: conDate,
          hidden: true,
          rule: { required: true },
          value: '',
          config: {
            type: 'date',
            valueType: 'yyyy-MM-dd'
          }
        },
        endTimeRange: {
          txt: '结束时间',
          el: conDate,
          value: '',
          rule: { required: true },
          config: {
            type: 'datetime',
            valueType: 'yyyy-MM-dd HH:mm:ss'
          }
        },
        endTimeAll: {
          txt: '结束时间',
          el: conDate,
          hidden: true,
          value: '',
          rule: { required: true },
          config: {
            type: 'date',
            valueType: 'yyyy-MM-dd'
          }
        },
        address: {
          txt: '地点'
        },
        attachList: {
          txt: '附件',
          value: [],
          el: conUpload
        },
        remark: {
          txt: '备注'
        },
        participantCodeList: {
          txt: '共享给',
          el: conCascader,
          // value: [],
          config: {
            dao: dao.deptUserTree,
            multiple: false,
            checkStrictly: false,
            clearable: true,
            label: 'NM',
            value: 'SN',
            children: 'ITEMS',
            filterable: true,
            allLevel: false
          }
        },
        remindType: {
          txt: '提醒',
          el: conSelect,
          value: 'not_remind',
          config: {
            clearable: false,
            map: {
              not_remind: '无',
              that_time: '日程开始时',
              five_minutes_before: '5分钟前',
              fifteen_minutes_before: '15分钟前',
              one_hour_before: '1小时前',
              one_day_before: '1天前'
            }
          }
        }
        // repeatType: {
        //   txt: '重复',
        //   el: conSelect,
        //   value: 'not_repeat',
        //   config: {
        //     disabled: true,
        //     clearable: false,
        //     map: {
        //       not_repeat: '不重复'
        //       // every_working_day: '每个工作日重复',
        //       // every_week: '每周重复',
        //       // every_two_weeks: ' 每两周重复',
        //       // every_month: '每月重复',
        //       // every_year: '每年重复'
        //     }
        //   }
        // }
      },
      formConfigPeople: {
        participantCodeList: {
          txt: '共享给',
          el: conCascader,
          // right: '多条请使用  ；号分隔，建议不超过100个字',
          config: {
            dao: dao.deptUserTree,
            multiple: true,
            checkStrictly: false,
            clearable: true,
            label: 'NM',
            value: 'SN',
            children: 'ITEMS',
            filterable: true,
            allLevel: false,
            disabled: true,
            placeholder: ''
          }
        }
      },
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          rrulePlugin,
          interactionPlugin // needed for dateClick
        ],
        // eventContent(arg) {
        //   console.log(arg, '内容自定义')
        //   return {
        //     html: `<div>${arg.timeText} ${arg.event.allDay ? '' : '·'} ${
        //       arg.event.title
        //     }</div>`
        //   }
        // },
        fixedWeekCount: false,
        dayHeaderContent(arg) {
          const m = `<p style="padding-left: 4px;font-weight:bold;margin-top:5px">${moment(
            arg.date
          ).format('DD')}</p>`
          if (arg.view.type === 'dayGridMonth') {
            return {
              html: `<p style="padding:10px 0;color:gray">${arg.text}</p>`
            }
          }
          if (
            arg.view.type === 'timeGridWeek' ||
            arg.view.type === 'timeGridDay'
          ) {
            const pm = `<p style="padding-left: 4px;font-weight:400;color:gray;margin-top:5px">${arg?.text.substr(
              -2,
              2
            )}</p>`
            const lunarDay = `<p style="padding-left: 4px;font-weight:400;color:gray;margin-top:5px">${
              // eslint-disable-next-line no-undef
              lunar(arg.date).lDate
            }</p>`
            return {
              html: pm + m + lunarDay
            }
          }
          // 表头文本的方法
          // return 12
        },
        views: {
          // 单元格里日程最多显示6条
          timeGrid: {
            dayMaxEventRows: 3
          },
          dayGridMonth: {
            dayCellContent(item) {
              const _date = new Date(item.date).toLocaleDateString().split('/')

              // -------- 农历相关代码 --------
              const date = item.date
              let html = ''
              // var cTerm = lunar(date).term
              // // 24 节气
              // if (cTerm) {
              //   html += `<div class='fc-day-cnTerm'>${cTerm}</div>`
              // }
              // // 传统节日，
              // var fes = lunar(date).festival()
              // if (fes && fes.length > 0) {
              //   html += "<div class='fc-day-cnTerm'>" + fes[0].desc + '</div>'
              // }
              // if (!cTerm && (!fes || fes.length === 0)) {
              //   html += "<div class='fc-day-cnDate'>" + lunar(date).lMonth + '月' + lunar(date).lDate + '</div>'
              // }
              // eslint-disable-next-line no-undef
              html += `<div class="fc-day-cnDate"> ${lunar(date).lDate}</div>`
              html += `<div>${_date[2]} </div>`
              return {
                html
              }
            }
          }
        },
        select: this.handleDateSelect, // 日历的单元格的点击事件
        eventClick: this.handleEventClick, // 日程的点击事件
        eventsSet: this.handleEvents,
        initialView: 'dayGridMonth',
        initialEvents: [], // 初始日程数据列表
        events: [], // 日程数据列表
        // css ----------------------------------------------------------------
        height: '100%',
        // aspectRatio: 2.12, // 设置日历的宽高比。
        // dragScroll:true,
        editable: false,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true, // true 周日开头, false 周一开头
        moreLinkContent: function(arg) {
          const html = `<div style="color:rgba(8, 98, 209, 1)">更多</div>`
          return { html: html }
        },
        slotEventOverlap: true, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
        allDayText: '全天', // 自定义全天视图的名称
        allDaySlot: true, // 是否在日历上方显示all-day(全天)
        // weekNumberCalculation: 'ISO',
        eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
        locale: 'zh-cn',
        displayEventTime: true, // 是否显示时间
        // slotLabelFormat: { // 周，日时左侧时间的格式
        //   hour: '2-digit',
        //   minute: '2-digit',
        //   meridiem: false,
        //   hour12: false, //24小时制度
        // },
        headerToolbar: {
          left: 'dayGridMonth,timeGridWeek,timeGridDay today prev,next',
          center: 'title',
          right: ''
        },
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '日',
          list: '列表'
        },
        scrollTime: '06:00:00',
        maxTime: '24:00:00',
        minTime: '00:00:00',
        dayCellContent(arg) {
          // 日期文本的方法
          // return  12
        },
        datesSet(dateInfo) {
          // 日历当前展示的起止时间
        }
      },
      currentEvents: []
    }
  },
  watch: {
    checkList() {
      this.processingScheduleData()
      this.getScheduleUserForThirday()
    }
  },

  mounted() {
    this.calendarApi = this.$refs.fullCalendar.getApi()
    this.calendar = this.$refs.fullCalendar.$options.calendar
    // this.calendarApi.next()
    // 获取日历中的日程
    this.processingScheduleData()
    // 获取人员
    this.getScheduleUser()
    // 获取创建人和登录用户相关的30天日程
    this.getScheduleUserForThirday()
  },

  methods: {
    lookOnline(urlD) {
      if (urlD) {
        if (urlD.indexOf('.txt') !== -1 || urlD.indexOf('.pdf') !== -1) {
          const url =
            'https://fop.cse.com.cn/onlinePreview?url=' +
            encodeURIComponent(base64.encode(urlD.replace('https', 'http')))
          window.open(url)
        } else {
          dao.getwils({ URL: urlD }).then(s => {
            window.open(s)
          })
        }
      }
    },
    toMore() {
      this.$router.push({
        path: '/eventList',
        query: {
          organizerCodes: this.checkList
        }
      })
    },
    timeIsBefore(date, type) {
      if (type === 'all_day') {
        return moment(date).isBefore(new Date(), 'day')
      }
      return moment(date).isBefore(new Date())
    },
    getWeek(date) {
      return moment(date).format('dddd')
    },
    getDays(date) {
      return moment(date).format('yyyy-MM-DD')
    },
    getTime(date) {
      return moment(date).format('H:mm:ss')
    },
    addOneDay(time) {
      const m = moment(time).format('yyyy-MM-DD')
      const changeM = moment(m).add(1, 'day')
      return moment(changeM._d).format('yyyy-MM-DD')
    },
    checkAllDay(type) {
      if (type === 'all_day') {
        return '是'
      }
      return '否'
    },
    changeType(type, isRepeat) {
      const repeatMap = {
        not_repeat: '不重复'
        // every_working_day: '每个工作日重复',
        // every_week: '每周重复',
        // every_two_weeks: ' 每两周重复',
        // every_month: '每月重复',
        // every_year: '每年重复'
      }
      const remindMap = {
        not_remind: '无',
        that_time: '日程开始时',
        five_minutes_before: '5分钟前',
        fifteen_minutes_before: '15分钟前',
        one_hour_before: '1小时前',
        one_day_before: '1天前'
      }
      const map = isRepeat ? repeatMap : remindMap
      return map[type]
    },
    editorScheduled(info) {
      this.diaConfigLook.open = false
      this.diaConfig.title = '编辑日程'
      setTimeout(() => {
        this.diaConfig.open = true
        this.editorCode = info.code
        this.dateOfBeforeModification = info.beginTime
        if (info.type === 'all_day') {
          info.type = '1'
          this.formConfig.beginTimeRange.hidden = true
          this.formConfig.beginTimeAll.hidden = false
          this.formConfig.endTimeRange.hidden = true
          this.formConfig.endTimeAll.hidden = false
          info.beginTimeAll = info.beginTime
          info.endTimeAll = info.endTime
        }
        if (info.type === 'period_of_time') {
          info.type = '0'
          this.formConfig.beginTimeRange.hidden = false
          this.formConfig.beginTimeAll.hidden = true
          this.formConfig.endTimeRange.hidden = false
          this.formConfig.endTimeAll.hidden = true
          info.beginTimeRange = info.beginTime
          info.endTimeRange = info.endTime
        }
        info.participantCodeList = info.participantCodeList.toString()
        console.log(info, '编辑的内容')
        this.$nextTick(() => {
          this.$refs.formAddType.setDatas(info)
        })
      }, 300)
    },
    deleteScheduled({ code, beginTime }) {
      this.lookLoad = true
      dao
        .deleteSchedule({
          dateOfDelete: beginTime,
          deleteType: 'exclude',
          scheduleCode: code
        })
        .then(res => {
          console.log(res, '删除日程成功')
          this.removeEventObj.event.remove()
          this.$message({
            type: 'success ',
            message: '删除成功'
          })
          this.lookLoad = false
          this.processingScheduleData(false)
          this.getScheduleUserForThirday()
          this.diaConfigLook.open = false
        })
        .catch(() => {
          this.lookLoad = false
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        })
    },
    // 新增修改生成日程
    addedModifiedBuildSchedule(res, type) {
      if (type === 'addedModified') {
        let scheduleOption = null
        if (res.repeatType === 'not_repeat') {
          scheduleOption = {
            item: res,
            id: res.code,
            title: res.title,
            start: res.beginTime,
            end:
              res.type === 'all_day'
                ? this.addOneDay(res.endTime)
                : res.endTime,
            allDay: res.type === 'all_day'
          }
        } else {
          const repeat = res.repeatType
          switch (repeat) {
            case 'every_working_day':
              scheduleOption = {
                item: res,
                id: res.code,
                title: res.title,
                start: res.beginTime,
                end: res.endTime,
                rrule: {
                  freq: 'dayly',
                  interval: 1, // 日程间隔
                  byweekday: ['mo', 'tu', 'we', 'th', 'fr'],
                  dtstart: res.beginTime,
                  until: res?.stopDate
                },
                exdate: res.excludeDateList, // 排除一个或多个日期
                allDay: res.type === 'all_day'
                // exrule: {
                //   // will also accept an array of these objects
                //   freq: 'dayly',
                //   dtstart: '2022-03-27',
                //   until: '2022-04-27'
                // }
              }
              break
            case 'every_week':
              scheduleOption = {
                item: res,
                id: res.code,
                title: res.title,
                start: res.beginTime,
                end: res.endTime,
                rrule: {
                  freq: 'weekly',
                  interval: 1, // 日程间隔
                  dtstart: res.beginTime,
                  until: res?.stopDate
                },
                exdate: res.excludeDateList, // 排除一个或多个日期
                allDay: res.type === 'all_day'
              }
              break

            case 'every_two_weeks':
              scheduleOption = {
                item: res,
                id: res.code,
                title: res.title,
                start: res.beginTime,
                end: res.endTime,
                rrule: {
                  freq: 'weekly',
                  interval: 2, // 日程间隔
                  dtstart: res.beginTime,
                  until: res?.stopDate
                },
                exdate: res.excludeDateList, // 排除一个或多个日期
                allDay: res.type === 'all_day'
              }
              break

            case 'every_month':
              scheduleOption = {
                item: res,
                id: res.code,
                title: res.title,
                start: res.beginTime,
                end: res.endTime,
                rrule: {
                  freq: 'monthly',
                  interval: 1, // 日程间隔
                  dtstart: res.beginTime,
                  until: res?.stopDate
                },
                exdate: res.excludeDateList, // 排除一个或多个日期
                allDay: res.type === 'all_day'
              }
              break

            case 'every_year':
              scheduleOption = {
                item: res,
                id: res.code,
                title: res.title,
                start: res.beginTime,
                end: res.endTime,
                rrule: {
                  freq: 'yearly',
                  interval: 1, // 日程间隔
                  dtstart: res.beginTime,
                  until: res?.stopDate
                },
                exdate: res.excludeDateList, // 排除一个或多个日期
                allDay: res.type === 'all_day'
              }
              break

            default:
              break
          }
        }
        this.calendar.addEvent(scheduleOption)
        this.calendar.unselect()
      } else {
        const scheduleEvents = []
        res.forEach(item => {
          if (item.repeatType === 'not_repeat') {
            scheduleEvents.push({
              item,
              id: item.code,
              title: item.title,
              start: item.beginTime,
              end:
                item.type === 'all_day'
                  ? this.addOneDay(item.endTime)
                  : item.endTime,
              allDay: item.type === 'all_day'
            })
          } else {
            const repeat = item.repeatType
            switch (repeat) {
              case 'every_working_day':
                scheduleEvents.push({
                  item,
                  id: item.code,
                  title: item.title,
                  duration: '01:10',
                  // startTime: '10:45:00',
                  // endTime: '12:45:00',
                  rrule: {
                    freq: 'dayly',
                    interval: 1, // 日程间隔
                    byweekday: ['mo', 'tu', 'we', 'th', 'fr'],
                    dtstart: item.beginTime,
                    until: item?.stopDate
                  },
                  exdate: item.excludeDateList, // 排除一个或多个日期
                  allDay: item.type === 'all_day'
                  // exrule: {
                  //   // will also accept an array of these objects
                  //   freq: 'dayly',
                  //   dtstart: '2022-03-27',
                  //   until: '2022-04-27'
                  // }
                })
                break
              case 'every_week':
                scheduleEvents.push({
                  item,
                  id: item.code,
                  title: item.title,
                  start: item.beginTime,
                  duration: '01:10',
                  end: item.endTime,
                  rrule: {
                    freq: 'weekly',
                    interval: 1, // 日程间隔
                    dtstart: item.beginTime,
                    until: item?.stopDate
                  },
                  exdate: item.excludeDateList, // 排除一个或多个日期
                  allDay: item.type === 'all_day'
                })
                break

              case 'every_two_weeks':
                scheduleEvents.push({
                  item,
                  id: item.code,
                  title: item.title,
                  duration: '01:10',
                  start: item.beginTime,
                  end: item.endTime,
                  rrule: {
                    freq: 'weekly',
                    interval: 2, // 日程间隔
                    dtstart: item.beginTime,
                    until: item?.stopDate
                  },
                  exdate: item.excludeDateList, // 排除一个或多个日期
                  allDay: item.type === 'all_day'
                })
                break

              case 'every_month':
                scheduleEvents.push({
                  item,
                  id: item.code,
                  title: item.title,
                  duration: '01:10',
                  start: item.beginTime,
                  end: item.endTime,
                  rrule: {
                    freq: 'monthly',
                    interval: 1, // 日程间隔
                    dtstart: item.beginTime,
                    until: item?.stopDate
                  },
                  exdate: item.excludeDateList, // 排除一个或多个日期
                  allDay: item.type === 'all_day'
                })
                break

              case 'every_year':
                scheduleEvents.push({
                  item,
                  id: item.code,
                  title: item.title,
                  duration: '01:10',
                  start: item.beginTime,
                  end: item.endTime,
                  rrule: {
                    freq: 'yearly',
                    interval: 1, // 日程间隔
                    dtstart: item.beginTime,
                    until: item?.stopDate
                  },
                  exdate: item.excludeDateList, // 排除一个或多个日期
                  allDay: item.type === 'all_day'
                })
                break

              default:
                break
            }
          }
        })
        console.log(scheduleEvents, 555555)
        this.calendarOptions.events = scheduleEvents
      }
    },
    getScheduleUserForThirday() {
      this.lookLoad = true
      this.thirdDayChooseFour = []
      dao
        .queryCurrentUserScheduleWithin30Days({
          organizerCodes: [this.checkList]
        })
        .then(res => {
          if (res.length && res.length > 4) {
            this.thirdDayChooseFour = res.slice(0, 4)
          } else {
            this.thirdDayChooseFour = res
          }
          this.lookLoad = false
        })
        .catch(() => {
          this.lookLoad = false
        })
    },
    getScheduleUser() {
      dao.queryOrganizerWithCurrentUser().then(res => {
        this.queryOrganizerWithCurrentUser = res
      })
    },
    // 处理日程数据
    processingScheduleData(need = true) {
      this.lookLoad = true
      dao
        .queryCurrentUserAllScheduleByOrganizer({
          organizerCodes: [this.checkList]
        })
        .then(res => {
          console.log(res, '所有日程')
          this.scheduleData = res
          if (need) {
            this.addedModifiedBuildSchedule(this.scheduleData)
          }
          this.lookLoad = false
        })
        .catch(() => {
          this.lookLoad = false
        })
    },

    createSchedule() {
      this.diaConfig.open = true
      this.editorCode = ''
      this.$nextTick(() => {
        this.$refs.formAddType.setDatas('0', 'type')
        this.formConfig.beginTimeRange.hidden = false
        this.formConfig.beginTimeAll.hidden = true
        this.formConfig.endTimeRange.hidden = false
        this.formConfig.endTimeAll.hidden = true
      })
    },
    // 选择日期
    handleDateSelect(selectInfo) {
      this.diaConfig.open = true
      this.editorCode = ''
      let beginTime = ''
      if (selectInfo.allDay) {
        beginTime = selectInfo.startStr + ' 08:00:00'
      } else {
        beginTime = moment(selectInfo.start).format('yyyy-MM-DD HH:mm:ss')
      }
      this.$nextTick(() => {
        this.$refs.formAddType.setDatas('0', 'type')
        this.$refs.formAddType.setDatas(beginTime, 'beginTimeRange')
      })
    },
    // 选择日程
    handleEventClick(clickInfo) {
      this.lookDataForSchedule = null
      this.removeEventObj = null
      const data = JSON.parse(
        JSON.stringify(clickInfo.event._def.extendedProps.item)
      )
      if (data.organizerCode !== this.user.SSN_SN) {
        this.isCreator = false
      } else {
        this.isCreator = true
      }
      this.lookDataForSchedule = data
      this.diaConfigLook.open = true
      this.removeEventObj = clickInfo
      this.$nextTick(() => {
        this.$refs.formPeople.setDatas(data)
      })
    },

    handleEvents(events) {
      this.currentEvents = events
    }
  }
}
</script>
<style scoped lang="scss">
#timeline {
  list-style: none;
  margin: 0px 0 6px 75px;
  padding-left: 11px;
  border-left: 2px solid rgba(80, 140, 213, 1);
  li {
    // margin: 40px 0;
    position: relative;
    padding: 10px 0;
  }
}

.date {
  margin-top: -10px;
  top: 58%;
  left: -80px;
  font-size: 12px;
  position: absolute;
  color: #508cd5;
  text-align: right;
}

.circle {
  margin-top: -10px;
  top: 59%;
  left: -18px;
  width: 12px;
  height: 12px;
  background: rgba(8, 98, 209, 1);
  border-radius: 50%;
  display: block;
  position: absolute;
}

.content {
  max-height: 20px;
  height: 60px;
  max-height: 60px;
  position: relative;
  background: rgba(8, 98, 209, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 15px;
  &:before,
  &:after {
    content: '';
    width: 0;
    height: 0;
    border: solid transparent;
    position: absolute;
    pointer-events: none;
    right: 100%;
  }

  &:after {
    border-right-color: rgba(80, 140, 213, 1);
    border-width: 8px;
    top: 50%;
    margin-top: -5px;
  }
  div {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #fdfdfe;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

  p {
    font-size: 14px;
    padding-top: 10px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #fdfdfe;
  }
}
.beforeSty {
  .date {
    color: rgba(153, 153, 153, 1) !important;
  }

  .circle {
    background: rgba(201, 219, 242, 1) !important;
  }

  .content {
    background: rgba(80, 140, 213, 0.2) !important;
    div {
      color: rgba(153, 153, 153, 1) !important;
      text-decoration: line-through !important;
    }

    p {
      color: rgba(153, 153, 153, 1) !important;
    }
    &:after {
      border-right-color: rgba(80, 140, 213, 0.2);
      border-width: 8px;
      top: 50%;
      margin-top: -5px;
    }
  }
}
</style>
<style lang="scss" scoped>
::v-deep .el-switch {
  width: 50px !important;
}
.spec-form {
  margin-left: 5px;
  margin-top: 15px;
  ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 0px !important;
  }
  ::v-deep .el-form-item__label span::after {
    content: '：';
    display: block;
    width: 0px !important;
  }

  ::v-deep .el-cascader__tags {
    left: 10px;
  }
  ::v-deep .el-form-item__label {
    line-height: 1.4 !important;
  }
}
.disnone ::v-deep input {
  border: none !important;
  padding-left: 0px !important;
}
.check-list-item {
  display: flex;
  flex-direction: column;
  ::v-deep .el-radio {
    margin-top: 15px !important;
    .el-radio__inner {
      width: 16px;
      height: 16px;
    }
  }
  ::v-deep .el-radio__label {
    font-size: 14px !important;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000 !important;
  }
  ::v-deep .el-checkbox {
    padding-top: 17px;
  }
}
.timeline {
  height: 35vh;
  width: 100%;
  overflow: auto;
  border: 1px solid #dbdbdb;
  padding-right: 10px;
}
.timeline-list {
  width: 100%;
}
.check-list {
  height: 32vh;
  width: 100%;
  border: 1px solid #dbdbdb;
  padding: 10px 20px;
  overflow: auto;
}
.people-list-title-txt {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  padding: 10px 23px;
  border-bottom: 3px rgba(255, 118, 118, 1) solid;
}
.people-list-title {
  display: flex;
  width: 100%;
  background-color: rgba(8, 98, 209, 1);
  justify-content: space-between;
}
.people-list-more {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #dae6f6;
  align-self: center;
  margin-right: 10px;
  cursor: pointer;
}
.people-list {
  margin-top: 22px;
  margin-bottom: 10px;
  width: 100%;
}
.info-page-edit {
  width: 100%;
  background-color: rgba(242, 243, 243, 1);
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #003d82;
  margin-top: 30px;
  cursor: pointer;
}
.info-page-delete {
  width: 100%;
  background-color: rgba(255, 118, 118, 0.1);
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ff7676;
  margin-top: 10px;
  margin-bottom: 20px;
  cursor: pointer;
}
.info-page-look {
  font-size: 12px;
  color: #333;
  margin-bottom: 20px;
}
.info-page-item {
  display: flex;
  padding-top: 30px;
}
.home-layout {
  background-color: #fff;
  padding: 20px;
}
.info-page-look-label {
  min-width: 60px;
  text-align: right !important;
  text-align-last: right !important;
}
.home-content {
  display: flex;
  min-height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.calendar {
  flex: 1;
  max-height: 100%;
}
.calendar-list {
  width: 330px;
  height: calc(100vh - 170px);
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.created-button {
  align-self: end;
}

// .fc {
//   /* the calendar root */
//   max-width: 1100px;
//   margin: 0 auto;
// }
::v-deep .info-page {
  justify-content: flex-start;
  padding-left: 20px;
}
</style>
